<template>
	<div class="jumbotron">
		<form class="form-horizontal" role="form" @submit.prevent="resumePost">
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<h1>简历编辑</h1>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<label for="trueName">姓名</label>
					<input type="text" class="form-control" id="trueName" placeholder="请输入真实姓名(必填)" v-model="info.trueName">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<label for="mobile">手机号</label>
					<input type="text" class="form-control" id="mobile" placeholder="请输入联系用手机号(必填)" v-model="info.mobile">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<label for="email">电子邮箱</label>
					<input type="text" class="form-control" id="email" placeholder="请输入联系用电子邮箱(必填)" v-model="info.email">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<label for="entRegion">意向求职地点</label>
					<p>
						<span>城市索引（按首字母排序）：</span>
						<select v-model="cityFirst">
							<option v-for="city in cityList">
								{{city.title}}
							</option>
						</select></p>
					<p>
						<span>请选择地区（必填）：</span>
						<select v-model="info.region">
							<option v-for="zy in selection">
								{{zy}}
							</option>
						</select>
					</p>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<label for="resumeContent">自我描述</label>
					<input type="text" class="form-control" id="resumeContent" placeholder="请输入自我描述(必填)" v-model="info.resumeContent">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<p style="color: red;">* 薪水若填0，则视为面议。</p>
					<label for="salaryMin">意向最低薪水</label>
					<input type="text" class="form-control" id="salaryMin" placeholder="请输入最低薪水" v-model="info.salaryMin">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<label for="entRegion">职位关键词（最多3个）</label>
					<p>
						<span>职位类别：</span>
						<select v-model="tagType">
							<option v-for="tag in tagList">
								{{tag.title}}
							</option>
						</select></p>
					<p>
						<span>请选择职位类目：</span>
						<select v-model="toAddTag">
							<option v-for="lm in tagSelect">
								{{lm}}
							</option>
						</select>
					</p>
					<button type="button" class="btn btn-primary" @click="addTag()">添加TAG</button>
					<button type="button" class="btn btn-danger" @click="clearTag()">清除TAG</button>
					<p></p>
					<ul class="breadcrumb" v-if="info.tag.length>0">
						<li v-for="selTag in info.tag">
							<a>{{selTag}}</a>
						</li>
					</ul>
					<p></p>
				</div>
			</div>
			<!-- <input type="hidden" v-model="info.holderId" /> -->
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-8">
					<button type="submit" class="btn btn-success btn-lg">确定</button>
				</div>
			</div>
		</form>
	</div>
</template>

<script>
	module.exports = {
		data: function() {
			return {
				toAddTag: '',
				tagList: {},
				tagType: '',
				sysUser: {
					trueName: '',
					mobile: '',
					email: '',
				},
				info: {
					trueName: '',
					mobile: '',
					email: '',
					region: '',
					resumeContent: '',
					hunterId: '',
					tag: [],
					salaryMin: ''
				},
				cityList: {

				},
				cityFirst: '',
			}
		},
		mounted() {
			$.ajax({
				url: "json/city.json",
				type: 'get',
				dataType: 'json',
				headers: {
					"Content-Type": "application/json",
				},
				success: (data) => {
					this.cityList = data.city;
				},
				error: (err) => {
					console.log("网络异常！")
				}
			});
			$.ajax({
				url: "json/tag.json",
				type: 'get',
				dataType: 'json',
				headers: {
					"Content-Type": "application/json",
				},
				success: (data) => {
					this.tagList = data.tags;
				},
				error: (err) => {
					console.log("网络异常！")
				}
			});
			this.info.holderId = JSON.parse(localStorage.getItem("sysUser")).id;
			this.sysUser = JSON.parse(localStorage.getItem("sysUser"));
			this.sysUser.truename === null ? this.info.trueName = "" : this.info.trueName = this.sysUser.truename;
			this.sysUser.mobile === null ? this.info.mobile = "" : this.info.mobile = this.sysUser.mobile;
			this.sysUser.email === null ? this.info.email = "" : this.info.email = this.sysUser.email;
		},
		computed: {
			selection: function() {
				for (let i = 0; i < this.cityList.length; i++) {
					if (this.cityList[i].title === this.cityFirst) {
						return this.cityList[i].lists;
					}
				}
			},
			tagSelect: function() {
				for (let i = 0; i < this.tagList.length; i++) {
					if (this.tagList[i].title === this.tagType) {
						return this.tagList[i].lists;
					}
				}
			}
		},
		methods: {
			addTag: function() {
				if (this.toAddTag === "" || this.info.tag.length > 2) {
					return;
				}
				for (let i = 0; i < this.info.tag.length; i++) {
					if (this.info.tag[i] === this.toAddTag) {
						return;
					}
				}
				this.info.tag.push(this.toAddTag)
			},
			clearTag: function() {
				this.info.tag = [];
			},
			resumePost: function() {
				if (checkNull(this.info.trueName, "姓名不能为空！") === false) {
					return false;
				}
				if (checkNull(this.info.mobile, "手机号不能为空！") === false) {
					return false;
				}
				if (checkNull(this.info.email, "电子邮箱不能为空！") === false) {
					return false;
				}
				if (checkNull(this.info.region, "意向求职地点不能为空！") === false) {
					return false;
				}
				if (checkNull(this.info.resumeContent, "自我描述不能为空！") === false) {
					return false;
				}
				this.info.salaryMin = parseInt(this.info.salaryMin);
				if (isNaN(this.info.salaryMin)) {
					alert("请输入正确的最低薪水！")
					this.info.salaryMin = 0;
					return false;
				}
				this.info.hunterId = JSON.parse(localStorage.getItem('sysUser')).id;
				if (this.info.tag.length < 1) {
					alert("请选择意向职位TAG！")
				}
				this.info.tag = JSON.stringify(this.info.tag);
				$.ajax({
					url: conf.ur + "/api/jobHunter/editResume",
					type: 'post',
					dataType: 'json',
					data: JSON.stringify(this.info),
					headers: {
						"Content-Type": "application/json",
						"x-auth-token": window.localStorage.getItem('x-auth-token')
					},
					success: (data) => {
						if (data.code === 0) {
							alert("编辑成功！");
							window.location.reload();
						} else {
							alert("编辑失败！")
							console.log(JSON.stringify(data))
						}
					},
					error: (err) => {
						console.log("网络异常！")
					}
				});
				return false;
			}
		}
	}
</script>

<style scoped>
	.jumbotron {
		background-color: ghostwhite;
	}
</style>
